<template>
	<view class="sponsor">
		<p-navbar title="跟单发起人"></p-navbar>
		<!-- 名字 -->
		<view class="spon-title">
			<image :src="imglogo" mode="aspectFill"></image>
			<view class="spon-text">
				管家
			</view>
		</view>
		<!-- 内容 -->
		<view class="center">
			<view class="center-item">
				<view class="">累计跟单投入(BTC)</view>
				<view class="item">0.00</view>
			</view>
			<view class="center-item">
				<view class="">累计跟单收益(BTC)</view>
				<view class="item color-rise">+00.00<text>(+00.00%)</text></view>
			</view>
			<view class="center-item">
				<view class="">当前跟单人数</view>
				<view class="item">0</view>
			</view>
			<view class="center-item">
				<view class="">累计跟单人数</view>
				<view class="item">0</view>
			</view>
		</view>
		<!-- 策略tab -->
		<view class="swiperes">
			<view v-for="(item,index) in swiper" :class="sindex==index?'swiperes-show':''" :key="index" class="swiperes-itemes" @tap="getswiper(item,index)">
				{{item}}
			</view>
		</view>
		<!-- swiper -->
		<swiper :current="swiperCurrent" @animationfinish="animationfinish" style="height: 750rpx;" >
			<!-- 现货 -->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="scrolltolower">
					<Strategy class="" :list.sync="list" :srategying.sync="loading.srategying"/>
				</scroll-view>
			</swiper-item>
			<!-- 合约量化 -->
			<swiper-item  class="swiper-item">
				<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="scrolltolower">
					<Strategy class="" :list.sync="list" :srategying.sync="loading.srategying"/>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import Strategy from './components/Strategy.vue'
	export default {
		components:{
			Strategy
		},
		data() {
			return {
				imglogo:'https://zhugelianghua.oss-cn-beijing.aliyuncs.com/image/headimage.png',//头像
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				swiper:['当前策略','历史策略'],//
				sindex:0,//tab 激活下标
				list: [{
						name: '网格交易',
						num: 'Huobi',
						center: '网格交易的和约版本，放大本金，加上杠杆,分仓套利'
					},
					{
						name: '马丁追踪',
						num: 'Huobi',
						center: '马丁追踪与趋势追踪结合的交易模型，加上杠杆，倍投利器，马丁追踪与趋势追踪结合的交易模型'
					}
				],
				loading:{
					srategying:'loading'
				},//下拉加载
			};
		},
		methods:{
			animationfinish(e) {// swiper滑动结束，分别设置tabs和swiper的状态
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.sindex = current;
				
			},
			getswiper(item, index){//swipeer切换
				this.sindex = index
			},
			scrolltolower(){
				if(this.cindex=='0'){//策略下拉
					
				}else{//发送人下拉
					
				}
				console.log("下拉")
			},
		}
	}
</script>

<style lang="scss" scoped>
.sponsor{
	margin: 50rpx 0rpx 0rpx;
	// width: 100%;
	// border: 1px solid red;
}
.spon-title{
	@include flex;
	align-items: center;
	margin-left: 30rpx;
	// margin-top: 50rpx;
	image{
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}
	.spon-text{
		padding-left: 20rpx;
		font-size: 32rpx;
	}
}
.center{
	@include background;
	background-color: #FFFFFF;
	border-radius: 16rpx;
	// background-image: url(../../static/goods.png);
	width: 93%;
	padding: 30rpx;
	margin: 40rpx 28rpx;
	.center-item{
		display: inline-block;
		width: 50%;
		color: $color-fu;
		font-size: 24rpx;
		line-height: 60rpx;
		.item{
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
		}
	}
}
 .swiperes{
		padding: 0rpx 30rpx 20rpx;
		@include flex;
		.swiperes-itemes{
			padding-right: 30rpx;
			color: $color-fu;
			font-size: 26rpx;
		}
		.swiperes-show{
			color: $light-color;
			font-size: 32rpx;
			font-weight: bold;
			
		}
	}
	.swiper-item{
		min-height: 500rpx;
		.scroll-y{
			height: 1115rpx;
		}
	}
	.contract-center {
			background-image: url(../../static/goods2.png);
			@include background;
			// margin-bottom: 20rpx;
			margin: 0rpx 30rpx 20rpx;
			.center-flex{
				@include flex;
				padding: 35rpx 40rpx 20rpx;
			}
			.center-text:nth-child(1) {
				width: 70%;
			}
			.center-text:nth-child(2) {
				width: 30%;
			}
			.center-text {
				line-height: 50rpx;
				.center2-item1 {
					font-size: 32rpx;
					text {
						padding: 6rpx 10rpx;
						border-radius: 18rpx;
						color: $color-fu;
						font-size: 24rpx;
						margin-left: 20rpx;
						border: 1rpx solid $border;
					}
				}
	
				.center2-item2 {
					color: $color-fu;
					font-size: 24rpx;
					font-weight: 400;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
</style>
